<template>
    <div class="container">
      <div class="top">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="search.date"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索商品信息"
          v-model="commodityNameList.name"
        >
          <template slot="prepend"
            >商品</template
          >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="commodityBtn"
          ></el-button>
        </el-input>
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索类别信息"
          v-model="classNameList.name"
        >
          <template slot="prepend"
            >类别</template
          >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="classBtn"
          ></el-button>
        </el-input>
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索供应商信息"
          v-model="supplierNameList.name"
        >
          <template slot="prepend"
            >供应商</template
          >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="supplierBtn"
          ></el-button>
        </el-input>
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索仓库"
          v-model="warehouseList.name"
        >
          <template slot="prepend"
            >仓库</template
          >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="warehouseBtn"
          ></el-button>
        </el-input>
        <el-input
          style="width: 200px"
          v-model="search.warning_number"
          placeholder="请输入预警库存数"
        ></el-input>
        <el-select v-model="search.or_zero" placeholder="请选择库存">
          <el-option
            v-for="item in zeroList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="search.is_has_pd"
          style="margin-left: 20px"
          placeholder="请选择是否有生产日期"
        >
          <el-option
            v-for="item in is_has_pdList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          style="width: 150px; margin-bottom: 5px"
          v-model="search.days"
          placeholder="请输入超生产日期天数"
        ></el-input>
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="dates"
          type="daterange"
          :clearable="false"
          range-separator="至"
          f
          start-placeholder="生产日期开始时间"
          end-placeholder="生产日期结束时间"
        ></el-date-picker>
        <!-- <el-checkbox v-model="search.sum_type">是否按成本价汇总</el-checkbox> -->
        <el-button
          size="small"
          type="primary"
          class="handleSearch"
          icon="el-icon-search"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button
          size="small"
          type="danger"
          class="handleSearch"
          icon="el-icon-delete"
          @click="empty()"
          >清空</el-button
        >
        <el-button
          type="info"
          size="small"
          icon="el-icon-tickets"
          @click="deriveShows()"
          >导出XLSX</el-button
        >
      </div>
      <el-table
        max-height="600"
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center"></el-table-column> -->
        <el-table-column
          prop="erp_goods_code"
          label="商品code"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_bar_code"
          label="条形码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stock_num"
          label="剩余库存数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stock_qty"
          label="剩余箱数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rk_spec"
          label="入库规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="whsecode"
          label="仓库编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="whsename"
          label="仓库名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="category_code"
          label="分类编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="category_name"
          label="分类名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_type"
          label="商品类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplier_code"
          label="供应商编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplier_name"
          label="供应商名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="su_area_code"
          label="区域编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="su_area_name"
          label="区域名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cost_price"
          label="单品成本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="成本金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="desc"
          label="品类型"
          align="center"
        ></el-table-column>
      </el-table>
     
      <el-dialog
        title="导出XLSX"
        :visible.sync="deriveDialogs.centerDialogVisible"
        width="550"
        center
      >
        <el-checkbox-group v-model="checkLists">
          <el-checkbox label="商品code"></el-checkbox>
          <el-checkbox label="商品名称"></el-checkbox>
          <el-checkbox label="剩余箱数"></el-checkbox>
          <el-checkbox label="入库规格"></el-checkbox>
          <el-checkbox label="仓库编码"></el-checkbox>
          <el-checkbox label="仓库名称"></el-checkbox>
          <el-checkbox label="分类编码"></el-checkbox>
          <el-checkbox label="分类名称"></el-checkbox>
          <el-checkbox label="商品类型"></el-checkbox>
          <el-checkbox label="单品成本"></el-checkbox>
          <el-checkbox label="成本金额"></el-checkbox>
          <el-checkbox label="序号"></el-checkbox>
          <el-checkbox label="条形码"></el-checkbox>
          <el-checkbox label="品类型"></el-checkbox>
          <el-checkbox label="剩余库存数量"></el-checkbox>
          <el-checkbox label="供应商编码"></el-checkbox>
          <el-checkbox label="供应商名称"></el-checkbox>
          <el-checkbox label="供应商区域编码"></el-checkbox>
          <el-checkbox label="供应商区域名称"></el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deriveDialogs.centerDialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="derives">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination>
      <commodityDialog
        :commoditydialog="commoditydialog"
        @tag="commodityTag"
      ></commodityDialog>
      <classDialog :classdialog="classdialog" @tag="classTag"></classDialog>
      <warehouseselect
        :warehouseselect="warehouseselect"
        @tag="warehouseTag"
      ></warehouseselect>
      <supplierSearch
        :supplierdialog="supplierdialog"
        @tag="supplierTag"
      ></supplierSearch>
    </div>
  </template>
  <script>
  import { getnowDate } from "@/utils/index";
  import Pagination from "@/components/pagination";
  import CommodityDialog from "@/components/superGrossMargin/commodityDialog";
  import ClassDialog from "@/components/superGrossMargin/classDialog";
  import SupplierSearch from "@/components/superGrossMargin/supplierSearch";
  import Warehouseselect from "@/components/commodity/warehouseselect";
  import { supplierStockList } from "@/api/commodity/commodityList";
  import { getToken } from "@/utils/auth";
  
  export default {
    components: {
      pagination: Pagination,
      supplierSearch: SupplierSearch,
      commodityDialog: CommodityDialog,
      classDialog: ClassDialog,
      warehouseselect: Warehouseselect
    },
    data() {
      return {
        //页面数据
        tableData: [],
        checkList: [
          "商品code",
          "条形码",
          "商品名称",
          "剩余库存数量",
          "剩余箱数",
          "入库规格",
          "仓库编码",
          "仓库名称",
          "供应商编码",
          "供应商名称",
          "供应商区域编码",
          "供应商区域名称",
          "分类编码",
          "分类名称",
          "商品类型",
          "单品成本",
          "成本金额",
          "序号",
          "品类型"
        ],
        checkLists: [
          "商品code",
          "条形码",
          "商品名称",
          "剩余库存数量",
          "剩余箱数",
          "入库规格",
          "仓库编码",
          "仓库名称",
          "供应商编码",
          "供应商名称",
          "供应商区域编码",
          "供应商区域名称",
          "分类编码",
          "分类名称",
          "商品类型",
          "单品成本",
          "成本金额",
          "序号",
          "品类型"
        ],
        //分页
        pageData: {
          pageSizes: [10, 20],
          pageSize: 10,
          page: 1,
          total: null,
          layout: "total, sizes, prev, pager, next, jumper"
        },
        //默认时间
        search: {
          date: "",
          warning_number: "",
          or_zero: "",
          sum_type: false,
          is_has_pd: "",
          days: "",
          produce_start_time: "",
          produce_end_time: ""
        },
        dates: [],
        is_has_pdList: [
          {
            value: 0,
            label: "全部"
          },
          {
            value: 1,
            label: "有生产日期"
          },
          {
            value: 2,
            label: "无生产日期"
          }
        ],
  
        typeList: [
          {
            value: 1,
            label: "入库"
          },
          {
            value: 2,
            label: "出库"
          }
        ],
        zeroList: [
          {
            value: "-1",
            label: "全部"
          },
          {
            value: "1",
            label: "库存为0"
          },
          {
            value: "2",
            label: "库存不为0"
          }
        ],
        //dialog信息
        commoditydialog: {
          centerDialogVisible: false
        },
        classdialog: {
          centerDialogVisible: false
        },
        deriveDialog: {
          centerDialogVisible: false
        },
        deriveDialogs:{
          centerDialogVisible: false
        },
        warehouseselect: {
          centerDialogVisible: false
        },
        commodityNameList: {
          name: "",
          code: ""
        },
        classNameList: {
          name: "",
          code: ""
        },
        warehouseList: {
          name: "",
          code: ""
        },
        supplierdialog: {
          centerDialogVisible: false
        },
        supplierNameList: {
          name: "",
          code: ""
        }
      };
    },
  
    created() {
      //页面数据
      this.getData();
    },
    methods: {
      //页面数据
      getData() {
        let data = {
          limit: this.pageData.pageSize,
          page: this.pageData.page,
          date: this.search.date,
          category_code: this.classNameList.code,
          goods_code: this.commodityNameList.code,
          whsecode: this.warehouseList.code,
          supplier_code: this.supplierNameList.code,
          warning_number: this.search.warning_number,
          or_zero: this.search.or_zero == "-1" ? "" : this.search.or_zero,
          sum_type: this.search.sum_type ? 1 : 0,
          is_has_pd: this.search.is_has_pd,
          days: this.search.days,
          produce_start_time: this.search.produce_start_time,
          produce_end_time: this.search.produce_end_time
        };
        supplierStockList(data)
          .then(res => {
            if (res.code == 0) {
              this.tableData = res.data.data;
              this.pageData.page = res.data.current_page;
              this.pageData.pagesize = res.data.per_page;
              this.pageData.total = res.data.total;
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      commodityTag(data) {
        this.commodityNameList = {
          name: "",
          code: ""
        };
        let arrName = [];
        let arrCode = [];
        data.forEach(res => {
          arrName.push(res.name);
          arrCode.push(res.code);
        });
        this.commodityNameList.name = arrName.join(",");
        this.commodityNameList.code = arrCode.join(",");
      },
      classTag(data) {
        this.classNameList = {
          name: "",
          code: ""
        };
        console.log(data, 11111);
        let arrName = [];
        let arrCode = [];
        data.forEach(res => {
          arrName.push(res.name);
          arrCode.push(res.code);
        });
        this.classNameList.name = arrName.join(",");
        this.classNameList.code = arrCode.join(",");
      },
      warehouseTag(data) {
        this.warehouseList = {
          name: "",
          code: ""
        };
        console.log(data, 11111);
        let arrName = [];
        let arrCode = [];
        data.forEach(res => {
          arrName.push(res.name);
          arrCode.push(res.code);
        });
        this.warehouseList.name = arrName.join(",");
        this.warehouseList.code = arrCode.join(",");
      },
      supplierTag(data) {
        this.supplierNameList = {
          name: "",
          code: ""
        };
        let arrName = [];
        let arrCode = [];
        data.forEach(res => {
          arrName.push(res.name);
          arrCode.push(res.code);
        });
        this.supplierNameList.name = arrName.join(",");
        this.supplierNameList.code = arrCode.join(",");
      },
      //超级商品搜索
      commodityBtn() {
        this.commoditydialog = {
          centerDialogVisible: true
        };
      },
      //超级类别搜索
      classBtn() {
        this.classdialog = {
          centerDialogVisible: true
        };
      },
      //超级仓库搜索
      warehouseBtn() {
        this.warehouseselect = {
          centerDialogVisible: true
        };
      },
      //超级供应商搜索
      supplierBtn() {
        this.supplierdialog = {
          centerDialogVisible: true
        };
      },
      // 本地搜索
      handleSearch() {
        if (this.dates.length > 0) {
          this.search.produce_start_time = this.dates[0];
          this.search.produce_end_time = this.dates[1];
        }
        this.pageData.page = 1;
        this.getData();
      },
      //清空
      empty() {
        this.search = {
          date: "",
          warning_number: "",
          or_zero: "",
          sum_type: false,
          is_has_pd: "",
          days: "",
          produce_start_time: "",
          produce_end_time: ""
        };
        this.dates = [];
        this.classNameList.name = "";
        this.commodityNameList.name = "";
        this.classNameList.code = "";
        this.commodityNameList.code = "";
        this.warehouseList.name = "";
        this.warehouseList.code = "";
        this.supplierNameList.name = "";
        this.supplierNameList.code = "";
      },

      deriveShows(){
        this.deriveDialogs.centerDialogVisible = true;
      },
      //导出XLSX
      derives() {
        this.$confirm("是否导出XLSX?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let checkDataList = [
              { lable: "商品code", value: "erp_goods_code" },
              { lable: "条形码", value: "goods_bar_code" },
              { lable: "商品名称", value: "goods_name" },
              { lable: "剩余库存数量", value: "stock_num" },
              { lable: "剩余箱数", value: "stock_qty" },
              { lable: "入库规格", value: "rk_spec" },
              { lable: "仓库编码", value: "whsecode" },
              { lable: "仓库名称", value: "whsename" },
              { lable: "供应商编码", value: "supplier_code" },
              { lable: "供应商名称", value: "supplier_name" },
              { lable: "供应商区域编码", value: "su_area_code" },
              { lable: "供应商区域名称", value: "su_area_name" },
              { lable: "分类编码", value: "category_code" },
              { lable: "分类名称", value: "category_name" },
              { lable: "商品类型", value: "goods_type" },
              { lable: "单品成本", value: "cost_price" },
              { lable: "成本金额", value: "amount" },
              { lable: "序号", value: "xuhao" },
              { lable: "品类型", value: "desc" }
            ];
            let fieldsArr = [];
            this.checkLists.forEach(res => {
              checkDataList.forEach(prop => {
                if (res == prop.lable) {
                  fieldsArr.push(prop.value);
                }
              });
            });
            let fields = fieldsArr.join(",");
            console.log(fields, 99999);
            let link = document.createElement("a");
            let or_zero = this.search.or_zero == "-1" ? "" : this.search.or_zero;
            let sum_type = this.search.sum_type ? 1 : 0;
            link.href =
              this.$axios.defaults.baseURL +
              "/smkapi/goods/supplierStockExportXlsx?token=" +
              getToken() +
              "&date=" +
              this.search.date +
              "&fields=" +
              fields +
              "&sum_type=" +
              sum_type +
              "&category_code=" +
              this.classNameList.code +
              "&or_zero=" +
              or_zero +
              "&goods_code=" +
              this.commodityNameList.code +
              "&whsecode=" +
              this.warehouseList.code +
              "&supplier_code=" +
              this.supplierNameList.code +
              "&is_has_pd=" +
              this.search.is_has_pd +
              "&days=" +
              this.search.days +
              "&produce_start_time=" +
              this.search.produce_start_time +
              "&produce_end_time=" +
              this.search.produce_end_time +
              "&export=1";
            link.click();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消导出"
            });
          });
      },
      //每页多少条
      handleCurrentChange(val) {
        this.pageData.page = 1;
        this.pageData.pageSize = val;
        this.getData();
      },
      //选取页数
      handleSizeChange(page) {
        this.pageData.page = page;
        this.getData();
      },
      //选取
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  };
  </script>
  <style scoped>
  .top {
    position: relative;
    margin-bottom: 5px;
  }
  
  .add {
    position: absolute;
    right: 0;
    top: 4px;
  }
  
  .pagination {
    text-align: right;
    padding: 10px;
  }
  </style>
  